<template>
    <div class="topic">
        <ul>
            <li v-for="item in dataArr" :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <h4>{{ item.title }} </h4>
                <p>{{ item.subtitle }}</p>
                <p><span>{{ item.price_info | formatMoney }}</span></p>
            </li>
        </ul>
        <!-- 分页管理器 -->
        <van-pagination v-model="page" :page-count="pageCount" mode="simple" @change='changeFn' />
    </div>
</template>
<script>
// 引入专题页接口
import { getTopicData } from '@/utils/http'
export default {
    name: 'Topic',
    data() {
        return {
            page: 1, // 默认当前页
            size: 10,  // 默认每页的数据条数
            dataArr: [], // 当前页面的数据
            pageCount: 0, // 总页数
        }
    },
    components: {

    },
    watch: {},
    methods: {
        changeFn() {
            console.log(this.page);
            this.getData()
        },
        getData() {
            getTopicData({
                page: this.page,
                size: this.size
            }).then(res => {
                console.log(res);
                const { data, currentPage, totalPages } = res.data.data
                this.dataArr = data
                this.page = currentPage
                this.pageCount = totalPages
            })
        }
    },
    created() {
        // 初始化请求数据
        this.getData()
    },
};
</script>
<style lang="less" scoped>
.topic {
    padding-bottom: 60px;

    img {
        width: 100%;
        // height: 200px;
        display: block;
    }

    h4 {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        margin: 15px 0px;
    }

    p {
        font-size: 18px;
        margin: 20px 0;
        color: #1f1f1f;
        text-align: center;

        span {
            font-size: 16px;
            color: #8b0000;
            font-weight: 500;
        }
    }



    // 如果要修改ui组件库的样式,一般你的权重不够,可以使用深度选择器
    /deep/.van-pagination__page-desc {
        display: none;
    }
}
</style>